<template>
  <!-- 点之间路径查询 -->
  <a-popover
    placement="rightTop"
    trigger="click"
    :visible="show"
    :overlay-style="{ width: '220px' }"
    @visibleChange="visibleChange"
  >
    <!-- 搜索框内容 -->
    <div slot="content" class="popover-content">
      <div class="item-title first-title">匹配字段</div>
      <a-radio-group v-model="seachMode" :default-value="1">
        <a-radio :value="1" :style="{ display: 'block' }">主属性</a-radio>
        <a-radio :value="2" :style="{ display: 'block' }">所有属性</a-radio>
      </a-radio-group>
      <div class="item-title">搜索节点类型</div>
      <div class="checkbox-section four-scroll-y">
        <a-checkbox
          class="checkbox-item"
          :indeterminate="indeterminate"
          :checked="checkAll"
          @change="onCheckAllChange"
          >全选
        </a-checkbox>
        <a-checkbox-group v-model="checkedList" @change="onChange">
          <a-row v-for="(nodeInfo, index) in plainOptions" :key="index">
            <a-col :span="24">
              <a-checkbox :value="nodeInfo"
                >{{ JSON.parse(nodeInfo).label }}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </div>
      <div class="item-title">搜索内容</div>
      <a-input
        v-model="predicate"
        size="small"
        placeholder="搜索内容"
        :allow-clear="true"
      ></a-input>
      <div class="search-path-btn">
        <a-button class="set-btn" size="small" @click="cancel">取消</a-button>
        <a-button class="set-btn" type="primary" size="small" @click="confirm"
          >搜索
        </a-button>
      </div>
    </div>
    <!-- icon -->
    <a-tooltip placement="left">
      <span slot="title">搜索</span>
      <span class="graph-content-btn" :class="{ 'icon-active': show }">
        <a-icon-font :class="{ active: show }" type="iconsousuo" />
      </span>
    </a-tooltip>
  </a-popover>
</template>

<script lang="ts">
/**
 * 点之间的路径查询 两点 / 多点  气泡卡片
 */
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({})
export default class SearchPopover extends Vue {
  @Prop({ type: Array, default: () => [] }) nodeList?: any[] // 选择的节点
  @Prop({ type: Array, default: () => [] }) modelNodes?: any[] // 将节点信息传给分析模块 用于搜索功能
  @Prop({ type: Boolean, default: false }) show: boolean = false

  public checkedList: any[] = [] // 已选择的节点
  // 过滤后的节点信息 array
  public get plainOptions() {
    if (this.modelNodes && this.modelNodes?.length > 0) {
      return this.modelNodes?.map((node: any) => {
        return JSON.stringify({
          label: node.label,
          keyAttr: node.keyAttr,
          id: node.id,
          attrs: node.attrs,
        })
      })
    }
    return []
  }

  public seachMode: number = 0 // 搜索模式
  public indeterminate: boolean = false // 全选 checkbox 半选状态
  public checkAll: boolean = false // 全选状态
  public predicate: any = '' // 搜索内容

  /**
   * 改变选中状态
   */
  public onChange(checkedList: any) {
    if (this.plainOptions) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < this.plainOptions?.length
      this.checkAll = checkedList.length === this.plainOptions?.length
    }
  }

  /**
   * 全选
   * @param $event
   */
  public onCheckAllChange($event: any) {
    this.checkAll = $event.target.checked
    this.checkedList = $event.target.checked ? this.plainOptions : []
    this.indeterminate = false
  }

  // popover 显示状态
  public visibleChange(visible: boolean) {
    // 延时隐藏
    if (!visible) {
      setTimeout(() => {
        this.$emit('visible-change', visible)
      }, 200)
    } else {
      this.$emit('visible-change', visible)
    }
  }

  // 取消
  public cancel() {
    this.$emit('cancel')
  }

  // 确认
  public confirm() {
    if (this.checkedList.length === 0) {
      this.$message.warning('请选择搜索范围！')
      return
    }
    if (!this.predicate) {
      this.$message.warning('请输入搜索内容！')
      return
    }
    const parameters: any = {
      categoryIds: this.checkedList.map((node: any) => {
        const nodeJson: any = JSON.parse(node)
        return nodeJson.id
      }),
      predicate: this.predicate,
      mode: this.seachMode,
    }
    this.$emit('confirm', parameters)
  }
}
</script>

<style scoped lang="less">
@import '@/styles/scroll-bar';

.popover-content {
  color: #5d637e;
  font-size: 12px;

  // item 标题
  .item-title {
    border-top: 1px solid #efefef;
    margin-top: 8px;
    padding: 8px 0;
  }

  .first-title {
    border-top: 1px solid transparent;
    margin-top: 0;
    padding-top: 0;
  }

  .checkbox-section {
    background-color: #eff0f7;
    max-height: 200px;
    overflow-y: auto;
    padding: 3px;

    .checkbox-item {
      font-size: 12px;
    }
  }

  .search-path-btn {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;

    .set-btn {
      margin-left: 8px;
    }
  }
}

/deep/ .ant-checkbox-group {
  width: 100%;
}

/deep/ .ant-input-number {
  width: 100%;
}

/deep/ .ant-radio-wrapper span {
  font-size: 13px;
}

.graph-content-btn {
  align-items: center;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #5d637e;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  padding: 8px;
  position: relative;

  &:hover {
    background-color: rgba(105, 115, 255, 0.1);
    border: 1px solid rgba(105, 115, 255, 0.1);
  }
}

// 功能激活，
.active {
  color: #6973ff;
}

.icon-active {
  border: 1px solid rgba(105, 115, 255, 0.1);
}
</style>
